<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>榴莲科技</title>
    <!-- Bootstrap Core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 公用css -->
    <link href="../css/sb-admin-2.css" rel="stylesheet">
    <!-- 表格样式 -->
    <link rel="stylesheet" href="../bower_components/bootstrap/js/bootstrap-table.min.css">
    <!-- 字体图标 -->
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- 文本编辑器样式 -->
    <link rel="stylesheet" href="../js/summernote/font-awesome.min.css">
    <link href="../js/summernote/summernote.css" rel="stylesheet" type="text/css">
    <!-- 多选添加 -->
    <link href="../js/froms/style-metro.css" rel="stylesheet" type="text/css">
    <link href="../js/froms/select2_metro.css" rel="stylesheet" type="text/css">
    <!-- 引入树 -->
    <link href="../js/ztree/zTreeStyle/metro.css" rel="stylesheet" type="text/css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<div>
            <!-- 标题部分 -->
            <div class="bootom10">
                <div class="col-lg-12 manage-head">
                    <h6 class="panel-title">表单展示</h6>
                </div>
            </div>
           <!-- tab切换 -->
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">一排列表</a>
                </li>
                <li><a href="#ios" data-toggle="tab">多排列表</a></li>

            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <!-- 表单引入开始 -->
                    <form>
                        <div class="form-table">
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>姓名：</label>
                                <div class="form-div"><input class=" form-control" type="text" placeholder="请输入姓名"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>性别：</label>
                                <div class="form-div"><input class=" form-control" type="radio" name="sex" > 男 <input class=" form-control" name="sex"  type="radio"> 女</div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>爱好：</label>
                                <div class="form-div"><input class=" form-control" type="checkbox" name="sex" > 音乐 <input class=" form-control" name="sex"  type="checkbox"> 足球 <input class=" form-control" name="sex"  type="checkbox"> 爬山</div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>分组类别：</label>
                                <div class="form-div"><select><option>类别一</option><option>类别二</option><option>类别三</option></select></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>开始时间：</label>
                                <div class="form-div"><input class=" form-control form_datetime" id="st_datetime" type="text" placeholder="请输入开始时间"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>结束时间：</label>
                                <div class="form-div"><input class=" form-control form_datetime" id="end_datetime"  type="text" placeholder="请输入结束时间"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group"> 
                                <label>模糊搜索：</label>
                                <div class="form-div"><input type="hidden" class="form-select2 span12 select2_sample2"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>多选添加：</label>
                                <div class="form-div"><input type="hidden" class="form-select2 span12 select2_sample3" value="足球, 篮球"></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>描述：</label>
                                <div class="form-div"><textarea placeholder="请输入您要输入的内容"></textarea></div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>图片上传：</label>
                                <div class="form-div">
                                    <div class="uploadimg">
                                        <span class="uploadimg-title">
                                            可上传<span class="uploadimg-num">5</span>张
                                        </span>
                                        <div class="uploadimg-add">
                                              <div class="add-img"></div>
                                              <input type="file" class="addimg-file f-pa">
                                        </div>
                                        <div class="addimg-num">
                                              <span id="addimgCount">0</span>/5
                                        </div>
                                     </div>
                                 </div>
                            </div>
                            <!-- 循环每个div -->
                            <div class="control-group">
                                <label>文本编辑：</label>
                                <div class="form-div" >
                                    <div class="summernote" ></div>
                                </div>
                            </div>
                        </div>
                        <div class="middle"><button type="button" class="btn btn-primary">提交</button> <button type="button" class="btn btn-danger">取消</button></div>

                    </form>
                    <!-- 表单引入结束 -->
                </div>
                <div class="tab-pane fade" id="ios">
                    <!-- 表单引入开始 -->
                    <table class="form-table2s" cellpadding="0" cellspacing="0" >
                        <tr>
                            <td colspan="4" class="form-table-title"><i class="fa fa-th-list"></i>基础信息</td>
                        </tr>
                        <tr>
                            <td>姓名：</td>
                            <td><input class=" form-control" type="text" placeholder="请输入姓名"></td>
                            <td>性别：</td>
                            <td><input class=" form-control" type="radio" name="sex" > 男 <input class=" form-control" name="sex"  type="radio"> 女</td>
                        </tr>
                        <tr>
                            <td>分组类别：</td>
                            <td><select><option>类别一</option><option>类别二</option><option>类别三</option></select></td>
                            <td>爱好：</td>
                            <td><input class=" form-control" type="checkbox" name="sex" > 音乐 <input class=" form-control" name="sex"  type="checkbox"> 足球 <input class=" form-control" name="sex"  type="checkbox"> 爬山</td>
                        </tr>
                        <tr>
                            <td colspan="4" class="form-table-title"><i class="fa fa-th-list"></i>个人信息</td>
                        </tr>
                        <tr>
                            <td>开始时间：</td>
                            <td><input class=" form-control form_datetime" id="st2_datetime" type="text" placeholder="请输入开始时间"></td>
                            <td>结束时间：</td>
                            <td><input class=" form-control form_datetime" id="end2_datetime"  type="text" placeholder="请输入结束时间"></td>
                        </tr>
                        <tr>
                            <td>描述：</td>
                            <td colspan="3"><textarea placeholder="请输入您要输入的内容"></textarea></td>

                        </tr>
                        <tr>
                            <td>表单树：</td>
                            <td colspan="3"><textarea placeholder="请输入您要输入的内容" data-toggle="modal" data-target="#myModal" id="treedata"></textarea></td>

                        </tr>
                        <tr>
                            <td>文本编辑：</td>
                            <td colspan="3"><div class="summernote" ></div></td>
                        </tr>


                    </table>
                    <!-- 表单引入结束 -->
                    <div class="middle"><button type="button" class="btn btn-primary">提交</button> <button type="button" class="btn btn-danger">取消</button></div>
                </div>

            </div>


    <!-- jQuery -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/bootstrap/js/bootstrap-table.min.js"></script>
    <!-- 汉化表格   -->
    <script src="../bower_components/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <!-- 时间控件   -->
    <script src="../js/laydate/laydate.js"></script>
    <!-- 文本编辑器 -->
    <script src="../js/summernote/summernote.min.js"></script>
    <!-- 多选添加 -->
    <script src="../js/froms/select2.min.js"></script>
    <script src="../js/froms/app.js"></script>
    <script src="../js/froms/form-samples.js"></script>
    <!-- 引入树 -->
    <script src="../js/ztree/jquery.ztree.all-3.5.min.js"></script>




<script type="text/javascript">
   $(function () {
       //时间插件引入
       laydate({
           elem: '#st_datetime'
       })
       laydate({
           elem: '#end_datetime'
       })
       laydate({
           elem: '#st2_datetime'
       })
       laydate({
           elem: '#end2_datetime'
       })
       //编辑器引入
       $('.summernote').summernote({
           height: 100,
           focus: true
    });
     //图片上传
       $(".addimg-file").change(function(e){
           var files = this.files;
           for (var i = 0; i < files.length; i++) {
               var file = files[i];
               var imageType = /image.*/;
               var addimg = document.createElement("img");

               addimg.classList.add("obj");
               addimg.file = file;

               var div=$("<div class='g-addimg'><span class='close'>×</span></div>");

               var appendImg = $(div).append(addimg);

               var reader = new FileReader();
               reader.onload = (function(aImg){
                   return function(e){
                       aImg.src = e.target.result;
                   };
               })(addimg);
               reader.readAsDataURL(file);
               $(this).parent(".uploadimg-add").append(div);

               var addimgL = $(".g-addimg").length;
               $("#addimgCount").text(addimgL);
               var numCount = $(this).parents().find(".uploadimg-num");
               numCount.text(5-addimgL);
               if(addimgL>5){
                   appendImg.remove();
                   $("#addimgCount").text(addimgL-1);
                   $(".uploadimg-num").text(0);
               }
           }
       });
       //鼠标经过上传之后的图片出现蒙层+删除，点击删除，图片删除
       $(".uploadimg").on("mouseover",".g-addimg",function(){
           $(this).addClass("on");
       });
       $(".uploadimg").on("mouseleave",".g-addimg",function(){
           $(this).removeClass("on");
       });
       $(".uploadimg").on("click",".g-addimg",function(){
           $(this).remove();
           var addimgL = $(".g-addimg").length;
           $("#addimgCount").text(addimgL);
           $(".uploadimg-num").text(5-addimgL);
       });
   })
    //表单多选，模糊查询引入
   jQuery(document).ready(function() {

       // initiate layout and plugins

       App.init();

       FormSamples.init();

   });
</script>
    <script>
        <!--
        var setting = {
            check:{
                enable:true
            },
            /*data: {
             simpleData: {
             enable: true
             }
             }*/
            data:    {
                simpleData:{
                    enable:true
                }
            },
            callback:{
                onCheck:onCheck
            }

        };

        var zNodes =[
            { id:1, pId:0, name:"全选1", open:true},
            { id:11, pId:1, name:"随意勾选1-1", open:true},
            { id:111, pId:11, name:"随意勾选 1-1-1"},
            { id:112, pId:11, name:"随意勾选 1-1-2"},
            { id:12, pId:1, name:"随意勾选 1-2", open:true},
            { id:121, pId:12, name:"随意勾选 1-2-1"},
            { id:122, pId:12, name:"随意勾选 1-2-2"},
            { id:2, pId:0, name:"全选2",  open:true},
            { id:21, pId:2, name:"随意勾选 2-1"},
            { id:22, pId:2, name:"随意勾选 2-2", open:true},
            { id:221, pId:22, name:"随意勾选 2-2-1"},
            { id:222, pId:22, name:"随意勾选 2-2-2"},
            { id:23, pId:2, name:"随意勾选 2-13"}
        ];






        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        function onCheck(e,treeId,treeNode){
            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
                    nodes=treeObj.getCheckedNodes(true),
                    v="";
            if (nodes.length>0) {
                for(var i=0;i<nodes.length;i++){
                    v+=nodes[i].name + ",";
                   $("#treedata").val(v);
                }
            }
              else {
                treeObj.cancelSelectedNode(nodes);
                $("#treedata").val(v);
            }



        }

        //-->

    </script>
    <script>
        $(function () {
            $("#btn-primary").click(function () {
                $('#myModal').modal('hide')
            })
  });
    </script>
<!-- 弹出层内容 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">充值标题</h4>
            </div>
            <div class="modal-body ztree ztree-div" id="treeDemo">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
